<template>
  <div class="shop-form">
    <el-form ref="shopForm" :model="shopFormData" label-width="120px" :rules="shopRules">
      <!-- 所属门店 -->
      <el-form-item label="所属门店" prop="shopId">
        <el-select v-model="shopFormData.shopId" class="sel-item">
          <el-option label="不选择" value=""></el-option>
        </el-select>
        <span class="hint-text">没有多店铺的不需要选择</span>
      </el-form-item>
      <!-- 商品分类 -->
      <el-form-item label="商品分类" prop="categoryId">
        <el-select placeholder="商品分类" v-model="shopFormData.categoryId" class="sel-item">
          <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <!-- 商品条码 -->
      <el-form-item label="商品条码" prop="barCode">
        <el-input v-model="shopFormData.barCode" class="sel-item"></el-input>
      </el-form-item>
      <!-- 商品名称 -->
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="shopFormData.name" class="name-ipt"></el-input>
      </el-form-item>
      <!-- 别名 -->
      <el-form-item label="别名" prop="subName">
        <el-input v-model="shopFormData.subName" class="sel-item"></el-input>
      </el-form-item>
      <!-- 商品类型 -->
      <el-form-item label="商品类型" prop="type">
        <el-radio v-model="shopFormData.type" :label="0">实物商品</el-radio>
        <el-radio v-model="shopFormData.type" :label="1">虚拟商品</el-radio>
      </el-form-item>
      <!-- 海外直邮 -->
      <el-form-item label="海外直邮" prop="overseas">
        <el-radio v-model="shopFormData.overseas" :label="true">支持</el-radio>
        <el-radio v-model="shopFormData.overseas" :label="false">不支持</el-radio>
      </el-form-item>
      <!-- 标签(关键字) -->
      <el-form-item label="标签(关键字)" prop="tsgs">
        <el-input v-model="shopFormData.tsgs" class="sel-item"></el-input>
        <span class="hint-text">多个标签用英文逗号隔开</span>
      </el-form-item>
      <!-- 扩展属性 -->
      <el-form-item label="扩展属性">
        <el-row v-for="(item,index) in num" :key="index">
          <el-input class="attr-ipt"></el-input>
          <span class="attr-text">:</span>
          <el-input class="attr-ipt"></el-input>
          <el-button type="success" @click="num++">添加</el-button>
          <el-button type="danger" @click="num--">删除</el-button>
        </el-row>
      </el-form-item>
      <!-- 商品特色 -->
      <el-form-item label="商品特色" prop="characteristic">
        <el-input type="textarea" rows="4" v-model="shopFormData.characteristic"></el-input>
        <span class="hint-text">最多500个</span>
      </el-form-item>
      <!-- 选择物流模板 -->
      <el-form-item label="选择物流模板" prop="logisticsId">
        <el-select v-model="shopFormData.logisticsId" class="sel-item" value="">
          <el-option label="不使用物流" value=""></el-option>
          <el-option v-for="item in logisticsList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <span class="hint-text">虚拟物品等不需要快递（不需要用户填写收货地址）的商品请选择不需要物流</span>
      </el-form-item>
      <!-- 优惠券 -->
      <el-form-item label="优惠券" prop="maxCoupons">
        <el-input v-model="shopFormData.maxCoupons" class="attr-ipt" type="number"></el-input>
        <span class="hint-text">最多可使用几张优惠券</span>
      </el-form-item>
      <!-- 排序 -->
      <el-form-item label="排序" prop="paixu">
        <el-input v-model="shopFormData.paixu" class="attr-ipt"></el-input>
      </el-form-item>
      <!-- 是否推荐 -->
      <el-form-item label="是否推荐" prop="recommendStatus">
        <el-radio v-model="shopFormData.recommendStatus" :label="0">不推荐</el-radio>
        <el-radio v-model="shopFormData.recommendStatus" :label="1">推荐</el-radio>
      </el-form-item>
      <!-- 是否展示 -->
      <el-form-item label="是否展示" prop="hidden">
        <el-radio v-model="shopFormData.hidden" :label="0">正常展示</el-radio>
        <el-radio v-model="shopFormData.hidden" :label="1">默认隐藏，不在前端显示</el-radio>
      </el-form-item>
      <!-- 是否售后 -->
      <el-form-item label="是否售后" prop="afterSale">
        <el-checkbox v-model="shopFormData.afterSale" label="0">仅退款</el-checkbox>
        <el-checkbox v-model="shopFormData.afterSale" label="1">退款退货</el-checkbox>
        <el-checkbox v-model="shopFormData.afterSale" label="2">换货</el-checkbox>
        <span class="red-text">都不勾选代表本商品不支持售后</span>
      </el-form-item>
      <!-- 上架状态 -->
      <el-form-item label="上架状态" prop="status">
        <el-radio v-model="shopFormData.status" :label="0">上架</el-radio>
        <el-radio v-model="shopFormData.status" :label="1">下架</el-radio>
      </el-form-item>
      <!-- 图片 -->
      <el-form-item label="图片" prop="pics">
        <!-- 提示框 -->
        <transition name="fade">
          <el-row class="img-hint-text" v-if="imgBoxShow">
          <span class="hint-text">第一张图片默认为封面图片，可拖动排序</span>
          <i class="el-icon-close img-close" @click="imgBoxShow=false"></i>
        </el-row>
        </transition>
        <!-- 上传图片 -->
        <el-button
          type="warning"
          size="mini"
          icon="el-icon-upload"
        @click="upLoadImg">上传本地图片</el-button>
        <el-row>
          <div class="upload-img-box" v-for="item in shopFormData.pics" :key="item">
            <img class="upload-img" :src="item">
          </div>
        </el-row>
      </el-form-item>
      <!-- 详细介绍 -->
      <el-form-item label="详细介绍" prop="content">
        <quill-editor
        v-model="shopFormData.content"
        :options="ediOptions"
        class="editor"></quill-editor>
      </el-form-item>
      <!-- 市场价 -->
      <el-form-item label="市场价" prop="originalPrice">
        <el-input class="attr-ipt" v-model="shopFormData.originalPrice"></el-input>
      </el-form-item>
      <!-- 现价 -->
      <el-form-item label="现价" prop="minPrice">
        <el-input class="attr-ipt" v-model="shopFormData.minPrice"></el-input>
      </el-form-item>
      <!-- 需要积分 -->
      <el-form-item label="需要积分" prop="minScore">
        <el-input class="attr-ipt" v-model="shopFormData.minScore"></el-input>
        <span class="hint-text">购买需要扣除用户的积分数量</span>
      </el-form-item>
      <!-- 赠送积分 -->
      <el-form-item label="赠送积分" prop="commission">
        <el-input class="attr-ipt" v-model="shopFormData.commission"></el-input>
        <span class="hint-text">购买后用户可获得的积分数量</span>
      </el-form-item>
      <!-- 最少购买 -->
      <el-form-item label="最少购买" prop="minBuyNumber">
        <el-input type="number" class="attr-ipt" v-model="shopFormData.minBuyNumber"></el-input>
      </el-form-item>
      <!-- 库存 -->
      <el-form-item label="库存" prop="stores">
        <el-input type="number" class="attr-ipt" v-model="shopFormData.stores"></el-input>
      </el-form-item>
      <!-- 按钮 -->
      <el-form-item>
        <el-col :span="6" :offset="8">
          <el-button>重置</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </el-col>
      </el-form-item>
    </el-form>

    <!-- 添加与图片对话框 -->
    <el-dialog
      :visible.sync="upLoadVisible"
      width="30%">
      <el-input></el-input>
      <el-upload
        action="https://user.api.it120.cc/fileUpload"
        :headers="headers"
        name="upfile"
        :on-preview="handlePictureCardPreview"
        :on-success="uploadSuccess"
        list-type="picture-card">
        <el-button type="primary">点击上传</el-button>
      </el-upload>
      <el-dialog :visible.sync="imgBoxVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
      <span slot="footer" class="dialog-footer">
        <el-button @click="upLoadVisible = false">取 消</el-button>
        <el-button type="primary" @click="upLoadsure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name:'ShopForm',
    data() {
      var picsvalidator=(rule,value,callback)=>{
        if(value.lenth==0){
          callback(new Error('至少上传一张图片'))
        }else{
          callback()
        }
      }
      return {
        shopRules:{
          // 商品分类
          categoryId:[
            {required:true,message:'商品类别不能为空',trigger:'change'}
          ],
          // 商品名称
          name:[
            {required:true,message:'商品名称不能为空',trigger:'blur'},
            {min:2,message:'商品名称不能低于两个字符',trigger:'blur'},
            {pattern:/^[\u4e00-\u9fa5]+$/,message:'商品名只能是中文',trigger:'blur'}
          ],
          // 商品特色
          characteristic:[
            {max:500,message:'最大字符数不能超过500',trigger:'blur'}
          ],
          // 优惠券
          maxCoupons:[
            {required:true,message:'需要填写优惠券',trigger:'blur'}
          ],
          // 图片
          pics:[
            {required:true,trigger:'blur'},
            {validator:picsvalidator,trigger:'blur'}
          ],
          // 详细介绍
          content:[
            {required:true,message:'内容必填',trigger:'blur'}
          ],
          // 市场价
          originalPrice:[
            {required:true,message:'必填',trigger:'blur'},
            {pattern:/^\d+$/,message:'只能是正数',trigger:'blur'}
          ],
          // 现价
          minPrice:[
            {required:true,message:'必填',trigger:'blur'},
            {pattern:/^\d+$/,message:'只能是正数',trigger:'blur'}
          ],
          // 需要积分
          minScore:[
            {required:true,message:'必填',trigger:'blur'},
            {pattern:/^\d+$/,message:'只能是正数',trigger:'blur'}
          ],
          // 赠送积分
          commission:[
            {required:true,message:'必填',trigger:'blur'},
            {pattern:/^\d+$/,message:'只能是正数',trigger:'blur'}
          ],
          // 库存
          stores:[
            {required:true,message:'必填',trigger:'blur'},
            {pattern:/^\d+$/,message:'只能是正数',trigger:'blur'}
          ],
          
        },


        num:1,
        imgBoxShow:true,
        upLoadVisible:false,
        imgBoxVisible:false,
        dialogImageUrl:'',
        headers:{
          "X-Token":sessionStorage.getItem('token'),
        },
        imgList:[],
        shopFormData:{
          shopId:'',
          categoryId:'',
          barCode:'',
          name:'',
          subName:'',
          type:0,
          overseas:false,
          tsgs:'',
          characteristic:'',
          logisticsId:'',
          maxCoupons:1,
          paixu:0,
          recommendStatus:0,
          hidden:0,
          afterSale:[0,1,2],
          status:0,
          pics:[],
          content:'',
          originalPrice:0,
          minPrice:0,
          minScore:0,
          commission:0,
          commissionType:1,
          minBuyNumber:1,
          stores:0,
        },
        categoryList:[],
        logisticsList:[],
        ediOptions:{
          placeholder:"",
        }
      }
    },
    created(){
      if(this.$route.params.id){
        this.getShopGoodsInfo(this.$route.params.id)
      }
      this.getcategoryList()
      this.getlogisticsList()
    },
    methods:{
      getcategoryList(){
        this.$net({
          url:'/user/apiExtShopGoodsCategory/list',
          method:'post'
        }).then(res=>{
          console.log(res.data.data);
          this.categoryList=res.data.data
        })
      },
      getlogisticsList(){
        this.$net({
          url:'/user/apiExtShopFreightTemplate/list',
          method:'post'
        }).then(res=>{
          console.log(res.data.data);
          this.logisticsList=res.data.data
        })
      },
      upLoadImg(){
        this.upLoadVisible=true
      },
      handlePictureCardPreview(file){
        this.dialogImageUrl=file.url
        this.imgBoxVisible=true
      },
      uploadSuccess(file){
        this.imgList.push(file.data.url)
      },
      upLoadsure(){
        this.shopFormData.pics=JSON.parse(JSON.stringify(this.imgList))
        this.upLoadVisible=false
      },
      submitForm(){
        this.$refs.shopForm.validate((boo,obj)=>{
          if(boo){
            this.$net({
              url:'/user/apiExtShopGoods/save',
              method:'post',
              data:this.shopFormData
            }).then(res=>{
              console.log(res);
            })
          }else{
            this.$message.error('部分内容填写不正确或没有填写')
          }
        })
      },
      getShopGoodsInfo(id){
        this.$net({
          url:"/user/apiExtShopGoods/info",
          params:{
            id
          }
        }).then(res=>{
          console.log(res.data.data);
          this.shopFormData=res.data.data.info
          this.shopFormData.pics=res.data.data.pics.map(item=>item.pic)
          this.imgList=res.data.data.pics.map(item=>item.pic)
          this.shopFormData.afterSale=res.data.data.info.afterSale.split(',')
          this.shopFormData.content=res.data.data.content.content
        })
      }
      
    }
  }
</script>

<style lang="less" scoped>
/deep/  .el-form-item__label{
  font-weight: bold;
}
.sel-item{
  width: 400px;
}
.hint-text{
  margin-left: 10px;
  color: #ff892a;
}
.name-ipt{
  width: 1000px;
}
.attr-ipt{
  width: 150px;
}
.attr-ipt:last-of-type{
  margin-right: 10px;
}
.attr-text{
  margin: 0 20px;
}
.red-text{
  color: red;
  margin-left: 30px;
}
.img-hint-text{
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  background-color: #fdf6ec;
  font-size: 13px;
}
.img-close{
  float: right;
  margin-right: 10px;
  line-height: 30px;
  color: #999;
}
.upload-img{
  width: 100px;
  height: 100px;
}
.upload-img-box{
  display: inline-block;
  margin-right: 20px;
}
.editor{
  height: 400px;
  margin-bottom: 50px;
}
</style>